import { Button, Form, Select } from "antd";
import { FormType } from "./model";
import Service from "./Service";
import style from "./style.module.css";
import { MyInput, MySelect } from "./styled";

export default class ApplyPolicy extends Service{
    
    onFinish = (values: any) => {
        console.log('Success:', values);
    };
    
    onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
    };
    render = () => {
        
        return (
            <div className={style.ApplyPolicy}>
               <div className={style.form}>
               <Form  
               name="basic"
                labelCol={{ span: 24 }}
                wrapperCol={{ span: 24 }}
                initialValues={{ remember: true }}
                onFinish={this.onFinish}
                onFinishFailed={this.onFinishFailed}
                autoComplete="off" >
                    {
                        this.state.formList?.formsModels?.map((item:any,index:any)=>{
                    switch (item?.typeId) {
                        case FormType.TEXT:
                            return  <Form.Item key={index}
                                initialValue={item?.defaultValue}
                                rules={[{ required: item?.required, message: `请输入${item?.label}` }]}
                                label={item?.label}
                                name={item?.name}
                                ><MyInput /></Form.Item>
                        case FormType.PASSWORD:
                            return <Form.Item key={index}
                            initialValue={item?.defaultValue}
                            label={item?.label}
                            name={item?.name}
                             rules={[{ required: item?.required, message: `请输入${item?.label}` }]}
                            ><MyInput.Password  /></Form.Item>
                        case FormType.TELEPHONE:
                            return <Form.Item key={index}
                            initialValue={item?.defaultValue}
                            label={item?.label}
                            name={item?.name}
                             rules={[{ required: item?.required, message: `请输入${item?.label}` }]}><MyInput /></Form.Item>
                        case FormType.MOBILE:
                            return <Form.Item key={index}
                            initialValue={item?.defaultValue}
                            label={item?.label}
                            name={item?.name}
                             rules={[{ required: item?.required, message: `请输入${item?.label}` }]}><MyInput /></Form.Item>
                        case FormType.TEXTAREA:
                            return <Form.Item key={index}
                            initialValue={item?.defaultValue}
                            label={item?.label}
                            name={item?.name}
                             rules={[{ required: item?.required, message: `请输入${item?.label}` }]}><MyInput.TextArea style={{
                                height:"20vw",border:"1px solid black"
                            }} /></Form.Item>
                        case FormType.NUMBER:
                            return <Form.Item key={index}
                            initialValue={item?.defaultValue}
                            label={item?.label}
                            name={item?.name}
                             rules={[{ required: item?.required, message: `请输入${item?.label}` }]}><MyInput /></Form.Item>
                        case FormType.AMOUNT:
                            return <Form.Item key={index}
                            label={item?.label}
                            initialValue={item?.defaultValue}
                            name={item?.name}
                             rules={[{ required: item?.required, message: `请输入${item?.label}` }]}><MyInput /></Form.Item>
                        case FormType.RADIO:
                            return <Form.Item key={index}
                            initialValue={item?.defaultValue}
                            label={item?.label}
                            name={item?.name}
                             rules={[{ required: item?.required, message: `请输入${item?.label}` }]}><MyInput /></Form.Item>
                        // 复选框
                        case FormType.CHECKBOX:
                        
                        // 下拉列表
                        case FormType.DROPDOWN:
                           return <Form.Item key={index}
                           initialValue={item?.defaultValue}
                            label={item?.label}>
                                    <MySelect>
                                        {
                                            item?.items.split(",").map((item1:any,index:number)=>{
                                                // item1
                                            return item1.indexOf("|") > 0 ? 
                                            <MySelect.Option key={index} value={item1.split("|")[0]}>{item1.split("|")[1]}</MySelect.Option> : 
                                            <MySelect.Option key={index} value={item1}>{item1}</MySelect.Option>
                                            })
                                        }
                                    
                                    </MySelect>
                                </Form.Item>
                        // 图片上传
                        case FormType.IMAGE_UPLOAD:
                        // 附件上传
                        case FormType.ATTACH:
                        // 日期选择
                        case FormType.DATE_PICKER:
                        // 日期范围选择
                        case FormType.DATE_RANGE_PICKER:
                        // 隐藏域 
                        case FormType.HIDDEN:
                        // 表单组
                        case FormType.FORM_ARRAY:
                        // 大表格
                        case FormType.BIGTABLE:
                        // 新大表格
                        case FormType.NEWBIGTABLE:
                        // 月份选择
                        case FormType.Month:
                        // 月份范围
                        case FormType.MonthRange:
                        // 展示附件上传
                        case FormType.AttachShow:
                            default:
                            return <Form.Item key={index}
                            label={item?.label}
                            name={item?.name}
                            initialValue={item?.defaultValue}
                             rules={[{ required: item?.required, message: `请输入${item?.label}` }]}><MyInput /></Form.Item>
                    }
                })
                    }
                    <Form.Item>
                        <div style={{width:"100%",height:"22vw",display:"flex",justifyContent:"center",alignItems:"center"}}>
                        <Button style={{width:"80%",height:"50%",borderRadius:"4vw"}} type="primary" htmlType="submit">
                            确认提交
                        </Button>
                        </div>
                    </Form.Item>
               </Form>
               </div>
            </div>
        )
    }
}